<template>
  <div style="color: #333333;">
    <!--人员详情部分-->
    <div class="personDetailBox flexBetween">
      <!--      <div class="certificatePoint" id="pointA" style="position: absolute;" :class="pointA"></div>-->
      <!--      <div class="attendancePoint" style="position: absolute;top: 861px;border: 1px solid red;"></div>-->
      <div class="leftBox">
        <div class="photoBox">
          <img
            :src="personInfo.filePath"
            alt
            v-if="personInfo.filePath != ''"
            :onerror="defaultPhoto"
          />
          <img src="@/assets/userProfile.png" alt v-else />
        </div>
        <p class="personnelCode">人员编码</p>
        <p class="code">{{ personInfo.code }}</p>
        <p style="text-align: center">
          <a-tag class="jobInformation" style color="#FF9966">{{ personInfo.type }}</a-tag>
        </p>
      </div>
      <div class="rightBox">
        <div>
          <span class="personName">{{ personInfo.fullName }}</span>
          <span class="personJob">{{ personInfo.postName }}</span>
          <span class="personJob">{{ personInfo.sex == '1' ? '男' : "女" }}</span>
          <span class="personJob">{{ personInfo.age }}岁</span>
        </div>
        <div class="personCardBox flexBetween">
          <div style="flex:1">
            <p>民族：{{ personInfo.nation }}</p>
            <p>证件号码：{{ personInfo.idNo }}</p>
            <div class="flexStart">
              <div>家庭住址：</div>
              <div style="width:70%;">{{ personInfo.address }}</div>
            </div>
          </div>
          <div style="flex:1">
            <p>出生日期：{{ personInfo.birthday }}</p>
            <p>手机号码：{{ personInfo.cellphone }}</p>
          </div>
          <div class="idCardBox flexBetween" style="flex:1">
            <div v-viewer>
              <img
                :src="personInfo.frontImage"
                alt
                v-if="personInfo.frontImage != ''"
                :onerror="defaultImg"
              />
              <img :src="imgUrlZ" alt v-else />
              <p>身份证（头像）</p>
            </div>
            <div style="margin-left: 36px;" v-viewer>
              <img
                :src="personInfo.backImage"
                alt
                v-if="personInfo.backImage != ''"
                :onerror="defaultImg2"
              />
              <img :src="imgUrlF" alt v-else />
              <p>身份证（国徽）</p>
            </div>
            
          </div>
        </div>

        
         <!--合同信息-->
        <div class="serviceInformationBox">
          <p>合同信息</p>
          <div class="serviceInformation contractClass" :style="contractState">
            <div style="height: 30px;"></div>
            <div class="flexBetween" style="position:relative">
              <span class="flex1">
                合同期限：{{ personInfo.contractStartDate }}
                <span v-if="personInfo.contractStartDate">~</span>
                {{ personInfo.contractEndDate }}
              </span>
              <span class="flex1">薪酬方式：{{ wageType }}</span>
              <span class="flex1" v-if="wageType=='日薪'">合同工资：{{ personInfo.contractWage }}元/天</span>
              <span class="flex1" v-else>合同工资：{{ personInfo.contractWage }}元/月</span>

              

              <div style="position:absolute;right:10px">
                <a-icon
                  v-if="!contract"
                  @click="changeContractHeight"
                  style="margin-right: 35px"
                  type="down"
                />
                <a-icon
                  v-if="contract"
                  @click="changeContractHeight"
                  style="margin-right: 35px"
                  type="up"
                />
              </div>
            </div>
            <div style="height: 33px;"></div>
            <div class="flexStart">
              <div class="flex1">
              合同附件：
              <template v-for="(item,index) in personInfo.contractFileList">
                <span @click="pdfView(item.filePath)" :key="index">
                  <span style="color: #1890FF;cursor: pointer">{{ item.fileName }}</span>
                </span>
              </template>
            </div>
            <div class="flex1">
              银行卡号：{{ personInfo.cardNo }}
            </div>
            <div class="flex1">

            </div>
            </div>
           
          </div>
        </div>
      </div>
    </div>

    <div class="informationScreeningBox" ref="piediv" :class="isFixed?'fixed':'noFixed'">
      <!--:class="isFixed?'fixed':'noFixed'"-->
      <a-tabs :activeKey="defaultActiveKey" @change="callback">
        <a-tab-pane key="1" tab="证书信息"></a-tab-pane>
        <a-tab-pane key="2" tab="考勤信息"></a-tab-pane>
        <!-- <a-tab-pane key="3" tab="工资支付"></a-tab-pane> -->
        <a-tab-pane key="3" tab="工作履历"></a-tab-pane>
      </a-tabs>
    </div>
    <div class="informationScreeningBox" v-show="isFixed">
      <!--:class="isFixed?'fixed':'noFixed'"-->
      <a-tabs :activeKey="defaultActiveKey" @change="callback">
        <a-tab-pane key="1" tab="证书信息"></a-tab-pane>
        <a-tab-pane key="2" tab="考勤信息"></a-tab-pane>
        <!-- <a-tab-pane key="3" tab="工资支付"></a-tab-pane> -->
        <a-tab-pane key="3" tab="工作履历"></a-tab-pane>
      </a-tabs>
    </div>

    <div class="personDetailBox" ref="distanceTopA">
      <div class="certificatePoint" style="position: relative;bottom: 183px;" id="pointA"></div>
      <a-table :columns="columns1" :data-source="certificateList" :pagination="false">
        <!--        <a @click="pdfView" slot="enclosure" slot-scope="text">{{ text }}</a>-->
      </a-table>
    </div>

    <div class="personDetailBoxB" ref="distanceTopB">
      <div class="attendancePoint" style="position: relative;bottom: 183px;"></div>
      <div class="pointBox">
        <span class="point">考勤信息</span>
      </div>
      <p style="text-align: center">累计出勤（天）</p>
      <p style="color: #333333;font-size: 28px;text-align: center">{{ attendanceDay }}</p>
      <a-table :columns="columns2" :data-source="yearAttendanceList" :pagination="false">
        <a @click="showTimeDetail(column,1)" slot="1" slot-scope="text,column">{{ text }}</a>
        <a @click="showTimeDetail(column,2)" slot="2" slot-scope="text,column">{{ text }}</a>
        <a @click="showTimeDetail(column,3)" slot="3" slot-scope="text,column">{{ text }}</a>
        <a @click="showTimeDetail(column,4)" slot="4" slot-scope="text,column">{{ text }}</a>
        <a @click="showTimeDetail(column,5)" slot="5" slot-scope="text,column">{{ text }}</a>
        <a @click="showTimeDetail(column,6)" slot="6" slot-scope="text,column">{{ text }}</a>
        <a @click="showTimeDetail(column,7)" slot="7" slot-scope="text,column">{{ text }}</a>
        <a @click="showTimeDetail(column,8)" slot="8" slot-scope="text,column">{{ text }}</a>
        <a @click="showTimeDetail(column,9)" slot="9" slot-scope="text,column">{{ text }}</a>
        <a @click="showTimeDetail(column,10)" slot="10" slot-scope="text,column">{{ text }}</a>
        <a @click="showTimeDetail(column,11)" slot="11" slot-scope="text,column">{{ text }}</a>
        <a @click="showTimeDetail(column,12)" slot="12" slot-scope="text,column">{{ text }}</a>
      </a-table>
    </div>

    <!-- <div class="personDetailBoxB" ref="distanceTopC">
      <div class="wagesPoint" style="position: relative;bottom: 183px;"></div>
      <div class="pointBox">
        <span class="point">工资支付</span>
      </div>
      <p style="text-align: center">累计支付工资（元）</p>
      <p style="color: #333333;font-size: 28px;text-align: center">{{this.wagePayTotal}}</p>
      <a-table :columns="columns3" :data-source="data3" :pagination="false">
        <a @click="goSalaryInformation(column,1)" slot="1" slot-scope="text,column">{{ text }}</a>
        <a @click="goSalaryInformation(column,2)" slot="2" slot-scope="text,column">{{ text }}</a>
        <a @click="goSalaryInformation(column,3)" slot="3" slot-scope="text,column">{{ text }}</a>
        <a @click="goSalaryInformation(column,4)" slot="4" slot-scope="text,column">{{ text }}</a>
        <a @click="goSalaryInformation(column,5)" slot="5" slot-scope="text,column">{{ text }}</a>
        <a @click="goSalaryInformation(column,6)" slot="6" slot-scope="text,column">{{ text }}</a>
        <a @click="goSalaryInformation(column,7)" slot="7" slot-scope="text,column">{{ text }}</a>
        <a @click="goSalaryInformation(column,8)" slot="8" slot-scope="text,column">{{ text }}</a>
        <a @click="goSalaryInformation(column,9)" slot="9" slot-scope="text,column">{{ text }}</a>
        <a @click="goSalaryInformation(column,10)" slot="10" slot-scope="text,column">{{ text }}</a>
        <a @click="goSalaryInformation(column,11)" slot="11" slot-scope="text,column">{{ text }}</a>
        <a @click="goSalaryInformation(column,12)" slot="12" slot-scope="text,column">{{ text }}</a>
      </a-table>
    </div>-->

    <div class="personDetailBoxB" ref="distanceTopC">
      <div class="resumePoint" style="position: relative;bottom: 183px;"></div>
      <div class="pointBox">
        <span class="point">工作履历</span>
      </div>
      <a-table :columns="columns4" :data-source="data4" :pagination="false">
        <a slot="projectName" slot-scope="text">
          <router-link :to="projectDetails">{{ text }}</router-link>
        </a>
      </a-table>
    </div>
    <supportCompany></supportCompany>

    <div>
      <a-modal
        v-model="visible"
        :bodyStyle="{border: '1px solid #EAEAEA'}"
        :closable="true"
        :maskClosable="false"
        :footer="null"
        :centered="true"
      >
        <!-- <div style="border-left: 1px solid #EAEAEA;border-bottom: 1px solid #EAEAEA;">
          <div class="flexBetween">
            <p class="date">日期</p>
            <p class="time">考勤时间</p>
          </div>
          <div v-for="(item,index) in attendanceMonthList" class="flexBetween" :key="index">
            <p class="tableInBox">{{ item.recordDate }}</p>
            <p class="tableInBox2">{{ item.recordTime ? item.recordTime : '-' }}</p>
          </div>
        </div>-->
        <div style="border-left: 1px solid #EAEAEA;border-bottom: 1px solid #EAEAEA;">
          <div class="flexBetween">
            <p class="date">日期</p>
            <p class="time">考勤时间</p>
            <p class="date">日期</p>
            <p class="time">考勤时间</p>
            <p class="date">日期</p>
            <p class="time">考勤时间</p>
            <p class="date">日期</p>
            <p class="time">考勤时间</p>
          </div>
          <div v-for="(item,index) in dateTimeList" :key="index" class="flexBetween">
            <p class="tableInBox" v-if="item.a<=monthLength">{{item.a}}</p>
            <p class="tableInBox" v-else></p>
            <p class="tableInBox2">{{item.aa}}</p>
            <p class="tableInBox" v-if="item.b<=monthLength">{{item.b}}</p>
            <p class="tableInBox" v-else></p>
            <p class="tableInBox2">{{item.bb}}</p>
            <p class="tableInBox" v-if="item.c<=monthLength">{{item.c}}</p>
            <p class="tableInBox" v-else></p>
            <p class="tableInBox2">{{item.cc}}</p>
            <p class="tableInBox" v-if="item.d<=monthLength">{{item.d}}</p>
            <p class="tableInBox" v-else></p>
            <p class="tableInBox2">{{item.dd}}</p>
          </div>
        </div>
      </a-modal>
    </div>

    <!-- pdf对话框 -->
    <div>
      <a-modal
        v-model="visiblePDF"
        title
        @ok="handleOkPdf"
        :footer="null"
        :maskClosable="false"
        width="1080px"
        :centered="true"
        :bodyStyle="{textAlign:'center'}"
        v-if="visiblePDF"
        key="modalpdf"
      >
        <embed width="1000" height="700" :src="this.pdfUrl" type />
      </a-modal>
    </div>
  </div>
</template>

<script>
import moment from 'moment'

const columns1 = [
  {
    title: '证书类型',
    dataIndex: 'certificateType',
    key: 'certificateType'
  },
  {
    title: '证书编号',
    dataIndex: 'certificateNo',
    key: 'certificateNo'
  },
  {
    title: '发证日期',
    dataIndex: 'certificateDate',
    key: 'certificateDate'
  },
  {
    title: '发证单位',
    dataIndex: 'certificateUnit',
    key: 'certificateUnit'
  },
  {
    title: '有效期限',
    dataIndex: 'certificateTerm',
    key: 'certificateTerm'
  }
  // {
  //   title: '附件',
  //   dataIndex: 'enclosure',
  //   key: 'enclosure',
  //   scopedSlots: {customRender: 'enclosure'}
  // }
]

const columns2 = [
  {
    title: '年份',
    dataIndex: 'year',
    key: 'year'
  },
  {
    title: '年度累计出勤',
    dataIndex: 'days',
    key: 'days',
    align: 'center'
  },
  {
    title: '1月',
    dataIndex: '1',
    key: '1',
    scopedSlots: { customRender: '1' },
    align: 'center'
  },
  {
    title: '2月',
    dataIndex: '2',
    key: '2',
    scopedSlots: { customRender: '2' },
    align: 'center'
  },
  {
    title: '3月',
    dataIndex: '3',
    key: '3',
    scopedSlots: { customRender: '3' },
    align: 'center'
  },
  {
    title: '4月',
    dataIndex: '4',
    key: '4',
    scopedSlots: { customRender: '4' },
    align: 'center'
  },
  {
    title: '5月',
    dataIndex: '5',
    key: '5',
    scopedSlots: { customRender: '5' },
    align: 'center'
  },
  {
    title: '6月',
    dataIndex: '6',
    key: '6',
    scopedSlots: { customRender: '6' },
    align: 'center'
  },
  {
    title: '7月',
    dataIndex: '7',
    key: '7',
    scopedSlots: { customRender: '7' },
    align: 'center'
  },
  {
    title: '8月',
    dataIndex: '8',
    key: '8',
    scopedSlots: { customRender: '8' },
    align: 'center'
  },
  {
    title: '9月',
    dataIndex: '9',
    key: '9',
    scopedSlots: { customRender: '9' },
    align: 'center'
  },
  {
    title: '10月',
    dataIndex: '10',
    key: '10',
    scopedSlots: { customRender: '10' },
    align: 'center'
  },
  {
    title: '11月',
    dataIndex: '11',
    key: '11',
    scopedSlots: { customRender: '11' },
    align: 'center'
  },
  {
    title: '12月',
    dataIndex: '12',
    key: '12',
    scopedSlots: { customRender: '12' },
    align: 'center'
  }
]
const data2 = []

const columns3 = [
  {
    title: '年份',
    dataIndex: 'year',
    key: 'year',
    align:'center'
  },
  {
    title: '年度累计支付',
    dataIndex: 'wageTotal',
    key: 'wageTotal',
    align:'center'
  },
  {
    title: '1月',
    dataIndex: '1',
    key: '1',
    scopedSlots: { customRender: '1' },
    align:'center'
  },
  {
    title: '2月',
    dataIndex: '2',
    key: '2',
    scopedSlots: { customRender: '2' },
    align:'center'
  },
  {
    title: '3月',
    dataIndex: '3',
    key: '3',
    scopedSlots: { customRender: '3' },
    align:'center'
  },
  {
    title: '4月',
    dataIndex: '4',
    key: '4',
    scopedSlots: { customRender: '4' },
    align:'center'
  },
  {
    title: '5月',
    dataIndex: '5',
    key: '5',
    scopedSlots: { customRender: '5' },
    align:'center'
  },
  {
    title: '6月',
    dataIndex: '6',
    key: '6',
    scopedSlots: { customRender: '6' },
    align:'center'
  },
  {
    title: '7月',
    dataIndex: '7',
    key: '7',
    scopedSlots: { customRender: '7' },
    align:'center'
  },
  {
    title: '8月',
    dataIndex: '8',
    key: '8',
    scopedSlots: { customRender: '8' },
    align:'center'
  },
  {
    title: '9月',
    dataIndex: '9',
    key: '9',
    scopedSlots: { customRender: '9' },
    align:'center'
  },
  {
    title: '10月',
    dataIndex: '10',
    key: '10',
    scopedSlots: { customRender: '10' },
    align:'center'
  },
  {
    title: '11月',
    dataIndex: '11',
    key: '11',
    scopedSlots: { customRender: '11' },
    align:'center'
  },
  {
    title: '12月',
    dataIndex: '12',
    key: '12',
    scopedSlots: { customRender: '12' },
    align:'center'
  }
]
const data3 = [
  {
    key: '1',
    year: '2021',
    days: '14300',
    1: '7300',
    2: '7000',
    3: '7500',
    4: '',
    5: '',
    6: '',
    7: '',
    8: '',
    9: '',
    10: '',
    11: '',
    12: ''
  }
]

const columns4 = [
  {
    title: '项目名称',
    dataIndex: 'projectName',
    key: 'projectName',
    scopedSlots: { customRender: 'projectName' }
  },
  {
    title: '标段',
    dataIndex: 'bidSection',
    key: 'bidSection'
  },
  {
    title: '岗位',
    dataIndex: 'job',
    key: 'job'
  },
  {
    title: '班组',
    dataIndex: 'team',
    key: 'team'
  },
  {
    title: '劳务单位',
    dataIndex: 'laborServiceUnit',
    key: 'laborServiceUnit'
  },
  {
    title: '进场时间',
    dataIndex: 'entryTime',
    key: 'entryTime'
  },
  {
    title: '退场时间',
    dataIndex: 'exitTime',
    key: 'exitTime'
  }
]
const data4 = [
  // {
  //   key: '1',
  //   projectName: '锡通过江通道公路接线工程北接线',
  //   bidSection: '一标',
  //   job: '架子工',
  //   team: '现浇箱梁班组',
  //   laborServiceUnit: '江苏省住房和城乡建设厅',
  //   entryTime: '2018-03-04',
  //   exitTime: '2020-03-04'
  // },
  // {
  //   key: '2',
  //   projectName: '海安至启东高速公路工程',
  //   bidSection: '二标',
  //   job: '架子工',
  //   team: '现浇箱梁班组',
  //   laborServiceUnit: '江苏省住房和城乡建设厅',
  //   entryTime: '2015-12-04',
  //   exitTime: '2018-03-01'
  // }
]

import title1 from '@/views/title/index.vue'
import supportCompany from '@/views/supportCompany/index.vue'
import { getOrgPerson, getTimeCard, getTimeCardMonth } from '@/api/person'
import { isEmpty } from '@/utils/mUtils.js'
import { mapGetters } from 'vuex'
import { queryYearWage } from '@/api/personDetail'
export default {
  created() {
    this.peopleId = this.$route.query.id
    this.getPersonInfo()
    this.getAttendance()
    this.getWage()
  },
  mounted() {
    window.scrollTo(0, 0)
    this.test = this.debounce(this.handleScroll, 20)
    window.addEventListener('scroll', this.test)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.test)
  },
  destroyed() {
    window.removeEventListener('scroll', this.test)
  },
  components: {
    title1,
    supportCompany
  },
  data() {
    return {
      visible: false,
      visiblePDF: false,
      home: '/gateway',
      projectDetails: '/projectDetails',
      laborUnit: '/laborUnit',
      teamGroup: '/teamGroup',
      salaryInformation: '/salaryInformation',
      construction: '/fu/construction',
      defaultActiveKey: '1', //默认选中的面板
      isFixed: false,
      imgUrlZ: require('@/assets/idCardZ.png'),
      imgUrlF: require('@/assets/idCardF.png'),
      labourHeight: '75px',
      contractHeight: '75px',
      labour: false,
      contract: false,
      // certificateList:[],
      columns1,
      columns2,
      data3: [],
      columns3,
      data4,
      columns4,
      personInfo: {},
      yearAttendanceList: [],
      attendanceDay: 0,
      attendanceMonthList: [],
      projectName2: '',
      laborName2: '',
      unitName2: '',
      teamName2: '',
      peopleId: '',
      yearMonth: '',
      pdfUrl: '',
      dateTimeList: [],
      monthLength: '',
      wagePayTotal: '',
      wageMonth: '',
      wageType:''
    }
  },

  methods: {
    getWage() {
      let data = {
        orgId: this.userInfo.orgId,
        personId: this.peopleId
      }
      queryYearWage(data).then((res) => {
        let data = res.data.data
        let arr = []
        this.wagePayTotal = data[0].wageTotal
        data.forEach((item, index) => {
          item.wageDetail['year'] = item.year
          item.wageDetail['wageTotal'] = item.yearWageTotal
          item.wageDetail['key'] = index
          arr.push(item.wageDetail)
        })
        this.data3 = arr
        // console.log(this.data3);
      })
    },
    // 获取用户信息
    getPersonInfo() {
      getOrgPerson({ id: this.peopleId, projectId: this.userInfo.projectId }).then((res) => {
        let result = res.data.data
        let certificateList = result.certificateList || []
        let {
          fullName,
          postName,
          sex,
          age,
          cellphone,
          address,
          code,
          type,
          teamName,
          healthStatus,
          bloodType,
          inTime,
          outTime
        } = result.orgPersonBean || {}
        let { nation, idNo, birthday } = result.idCardBean || {}
        let { filePath = '' } = result.photoImage || {}
        if (filePath == null) {
          filePath = ''
        }
        // console.log(filePath);

        let { name = '' } = result.labourOrgPO || {}
        let { contractStartDate, contractEndDate, contractWage, fileList } = result.personContractPO || {}
        //薪资类型
          if (result.personContractPO) {
            if (result.personContractPO.type == '1') {
            this.wageType = '月薪'
          } else {
            this.wageType = '日薪'
          }
          }
        let { cardNo } = result.personWageCardPO || {}
        const contractFileList = fileList || []

        contractFileList.forEach((item) => {
          item.filePath = this.userInfo.projectUrl + '/' + item.filePath
        })

        if (result.frontImage == null) {
          result.frontImage = { filePath: '' }
        }

        if (result.backImage == null) {
          result.backImage = { filePath: '' }
        }

        this.personInfo = Object.assign({}, this.personInfo, {
          fullName,
          postName,
          sex,
          age,
          nation,
          idNo,
          birthday: moment(birthday).format('YYYY-MM-DD'),
          cellphone,
          address,
          code,
          type: this.getPersonType(type),
          filePath: this.userInfo.projectUrl + '/' + filePath || '',
          frontImage: this.userInfo.projectUrl + '/' + result.frontImage.filePath || '',
          backImage: this.userInfo.projectUrl + '/' + result.backImage.filePath || '',
          labourName: name,
          teamName,
          healthStatus: this.getHealthStatus(healthStatus),
          bloodType: this.getBloodType(bloodType),
          inTime: moment(inTime).format('YYYY-MM-DD'),
          outTime: outTime ? moment(outTime).format('YYYY-MM-DD') : '',
          cardNo,
          contractStartDate: !isEmpty(contractStartDate) ? moment(contractStartDate).format('YYYY-MM-DD') : '',
          contractEndDate: !isEmpty(contractEndDate) ? moment(contractEndDate).format('YYYY-MM-DD') : '',
          contractWage,
          contractFileList,
          certificateList
        })

        // console.log(this.personInfo)
      })
    },
    // 获取考勤信息
    getAttendance() {
      getTimeCard({ orgPersonId: this.peopleId, projectId: this.userInfo.projectId }).then((res) => {
        let result = res.data.data
        let { allAttendanceNum, detail } = result
        this.attendanceDay = allAttendanceNum
        // let obj = {
        //   key: '1',
        //   year: new Date().getFullYear(),
        //   days: attendanceNum
        // }
        let obj = []
        detail.forEach((item, index) => {
          item.yearAttendance['year'] = item.year
          item.yearAttendance['days'] = item.attendanceNum
          item.yearAttendance['key'] = index
          obj.push(item.yearAttendance)
        })
        this.yearAttendanceList = obj
        // console.log(this.yearAttendanceList)

        // this.yearAttendanceList = [obj]
        // console.log(this.yearAttendanceList );
      })
    },
    goSalaryInformation(val, title) {
      let month = ''
      if (title < 10) {
        month = '0' + title
      } else {
        month = title
      }
      this.yearMonth = val.year + '-' + month
      console.log(this.yearMonth)

      this.$router.push({ path: '/salaryInformation2', query: { peopleId: this.peopleId } })
    },
    showTimeDetail(val, title) {
      // console.log(val,title);
      let month = ''
      if (title < 10) {
        month = '0' + title
      } else {
        month = title
      }
      this.yearMonth = val.year + '-' + month
      this.getTimeAmodal()
      this.visible = true
    },
    onScroll() {
      let isBottom = false
      //变量scrollTop是滚动条滚动时,距离顶部的距离
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      //变量windowHeight是可视区的高度
      let windowHeight = document.documentElement.clientHeight || document.body.clientHeight
      //变量scrollHeight是滚动条的总高度
      let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
      //滚动条到底部的条件
      if (scrollTop + windowHeight == scrollHeight) {
        isBottom = true
      }
      return isBottom
    },
    //防抖
    debounce(fn, wait) {
      var timeout = null
      return function() {
        if (timeout !== null) clearTimeout(timeout)
        timeout = setTimeout(fn, wait)
      }
    },
    callback(tab) {
      this.defaultActiveKey = tab
      const tabObj = {
        '1': '.certificatePoint',
        '2': '.attendancePoint',
        '3': '.wagesPoint',
        '4': '.resumePoint'
      }
      this.$el.querySelector(tabObj[tab]).scrollIntoView({ behavior: 'smooth', block: 'start' })
    },
    pdfView(filePath) {
      this.pdfUrl = filePath
      this.visiblePDF = true
      // window.open('http://it-jhkj.zhinengjianshe.com/uploadfile/temp/device/2cd6a578de5d447cbcc70fd857b3b31c/2cd6a578de5d447cbcc70fd857b3b31c.pdf')
      // window.open(filePath)
    },
    changeLabourHeight() {
      this.labour = !this.labour
      if (this.labour) {
        this.labourHeight = '128px'
      } else {
        this.labourHeight = '75px'
      }
    },
    changeContractHeight() {
      this.contract = !this.contract
      if (this.contract) {
        this.contractHeight = '128px'
      } else {
        this.contractHeight = '75px'
      }
    },
    handleScroll() {
      const distanceTopA = this.$refs.distanceTopA.getBoundingClientRect().top
      const distanceTopB = this.$refs.distanceTopB.getBoundingClientRect().top
      const distanceTopC = this.$refs.distanceTopC.getBoundingClientRect().top
      // const distanceTopD = this.$refs.distanceTopD.getBoundingClientRect().top
      if (distanceTopA < 10) {
        this.isFixed = true
      } else {
        this.isFixed = false
      }
      if (this.onScroll()) {
        this.defaultActiveKey = '3'
        return
      }
      // if (this.defaultActiveKey == '4') return;
      if (distanceTopA >= 50 && distanceTopA <= 200) {
        this.defaultActiveKey = '1'
      } else if (distanceTopB >= 50 && distanceTopB <= 200) {
        this.defaultActiveKey = '2'
      } else if (distanceTopC >= 50 && distanceTopC <= 200) {
        this.defaultActiveKey = '3'
      }
      // else if (distanceTopD >= 50 && distanceTopD <= 200) {
      //   this.defaultActiveKey = '4'
      // }
    },
    getPersonType(type) {
      let val = ''
      switch (type) {
        case '1':
          val = '作业人员'
          break
        case '2':
          val = '特种作业人员'
          break
        case '3':
          val = '安全管理人员'
          break
        case '4':
          val = '机驾人员'
          break
        case '5':
          val = '管理人员'
          break
      }
      return val
    },
    getHealthStatus(type) {
      let val = ''
      switch (type) {
        case '1':
          val = '健康'
          break
        case '2':
          val = '一般'
          break
        case '3':
          val = '较差'
          break
      }
      return val
    },
    getBloodType(type) {
      let val = ''
      switch (type) {
        case '1':
          val = 'A型'
          break
        case '2':
          val = 'B型'
          break
        case '3':
          val = 'AB型'
          break
        case '4':
          val = 'O型'
          break
        case '5':
          val = '未知'
          break
      }
      return val
    },
    getCertificateType(type) {
      let val = ''
      switch (type) {
        case '1':
          val = '其他'
          break
        case '2':
          val = 'B证'
          break
        case '3':
          val = 'C证'
          break
        case '4':
          val = '特种作业证'
          break
      }
      return val
    },
    getTimeAmodal() {
      let data = {
        personId: this.peopleId,
        date: this.yearMonth,
        projectId: this.userInfo.projectId
      }
      getTimeCardMonth(data).then((res) => {
        let data = res.data.data
        this.attendanceMonthList = data
        // console.log(data)
        this.monthLength = data.length
        if (this.monthLength == 28) {
          data.push({ recordTime: '' }, { recordTime: '' }, { recordTime: '' })
        } else if (this.monthLength == 29) {
          data.push({ recordTime: '' }, { recordTime: '' })
        } else if (this.monthLength == 30) {
          data.push({ recordTime: '' })
        }
        this.dateTimeList = [
          {
            a: '1',
            aa: data[0].recordTime,
            b: '9',
            bb: data[8].recordTime,
            c: '17',
            cc: data[16].recordTime,
            d: '25',
            dd: data[24].recordTime
          },
          {
            a: '2',
            aa: data[1].recordTime,
            b: '10',
            bb: data[9].recordTime,
            c: '18',
            cc: data[17].recordTime,
            d: '26',
            dd: data[25].recordTime
          },
          {
            a: '3',
            aa: data[2].recordTime,
            b: '11',
            bb: data[10].recordTime,
            c: '19',
            cc: data[18].recordTime,
            d: '27',
            dd: data[26].recordTime
          },
          {
            a: '4',
            aa: data[3].recordTime,
            b: '12',
            bb: data[11].recordTime,
            c: '20',
            cc: data[19].recordTime,
            d: '28',
            dd: data[27].recordTime
          },
          {
            a: '5',
            aa: data[4].recordTime,
            b: '13',
            bb: data[12].recordTime,
            c: '21',
            cc: data[20].recordTime,
            d: '29',
            dd: data[28].recordTime
          },
          {
            a: '6',
            aa: data[5].recordTime,
            b: '14',
            bb: data[13].recordTime,
            c: '22',
            cc: data[21].recordTime,
            d: '30',
            dd: data[29].recordTime
          },
          {
            a: '7',
            aa: data[6].recordTime,
            b: '15',
            bb: data[14].recordTime,
            c: '23',
            cc: data[22].recordTime,
            d: '31',
            dd: data[30].recordTime
          },
          {
            a: '8',
            aa: data[7].recordTime,
            b: '16',
            bb: data[15].recordTime,
            c: '24',
            cc: data[23].recordTime,
            d: '',
            dd: ''
          }
        ]
      })
    }
  },
  computed: {
    labourState() {
      return {
        '--box-height': this.labourHeight
      }
    },
    contractState() {
      return {
        '--box-height': this.contractHeight
      }
    },
    certificateList() {
      let result = []
      let certificateList = this.personInfo.certificateList || []
      let { getCertificateType } = this
      certificateList.forEach((item) => {
        result.push({
          key: item.id,
          certificateType: getCertificateType(item.type),
          certificateNo: item.code,
          certificateDate: !isEmpty(item.issueDate) ? moment(item.issueDate).format('YYYY-MM-DD') : '',
          certificateUnit: item.issueUnit,
          certificateTerm: !isEmpty(item.validPeriod) ? moment(item.validPeriod).format('YYYY-MM-DD') : ''
        })
      })
      return result
    },
    defaultImg() {
      return 'this.src="' + this.imgUrlZ + '"'
    },
    defaultImg2() {
      return 'this.src="' + this.imgUrlF + '"'
    },
    defaultPhoto() {
      return 'this.src="' + require('@/assets/userProfile.png') + '"'
    },
    ...mapGetters(['userInfo'])
  }
}
</script>

<style scoped lang='less'>
div,
p,
span {
  font-family: 'Microsoft YaHei';
}

.breadCrumbBox {
  width: 100%;
  height: 40px;
  background-color: rgba(246, 248, 249, 1);
  position: fixed;
  top: 100px;
  z-index: 100;
}

::v-deep .ant-breadcrumb > span:last-child {
  color: rgba(20, 146, 255, 1);
}

.personDetailBox {
  width: 1200px;
  /*height: 500px;*/
  margin: auto;
  margin-top: 20px;
}

.personDetailBoxB {
  width: 1200px;
  margin: auto;
  margin-top: 50px;
}

.personDetailBoxC {
  width: 1200px;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 140px;
}

.leftBox {
  width: 140px;
  height: 100%;
}

.rightBox {
  width: 1020px;
  height: 100%;
}

.photoBox {
  width: 140px;
  height: 172px;
}

.photoBox img {
  width: 100%;
  height: 100%;
}

.personnelCode {
  font-size: 14px;
  color: #999999;
  text-align: center;
  margin-top: 16px;
}

.code {
  font-size: 16px;
  color: #333333;
  font-weight: 400;
  text-align: center;
  margin-bottom: 0;
}

.jobInformation {
  font-size: 14px;
  height: 24px;
  text-align: center;
  border-radius: 0;
  margin: auto;
  margin-top: 14px;
}

.personName {
  font-size: 24px;
  font-weight: bold;
  color: #333333;
}

.personJob {
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  margin-left: 36px;
}

.personCardBox {
  width: 100%;
  height: 162px;
  padding: 24px 30px 21px 30px;
  background-color: #f5faff;
  margin-top: 22px;
}

.personCardBox > div > p {
  font-size: 15px;
  color: #333;
  font-weight: 400;
}

.idCardBox > div > p {
  font-size: 14px;
  color: #666;
  font-weight: 400;
  margin-top: 16px;
  text-align: center;
}

.idCardBox > div > img {
  width: 140px;
  // height: 84px;
  object-fit: cover;
}

.serviceInformationBox {
  margin-top: 25px;
}

.serviceInformationBox > p {
  font-size: 16px;
  font-weight: 400;
  color: #333;
}

.serviceInformation {
  width: 100%;
  /*height: 128px;*/
  background-color: #f5faff;
  overflow: hidden;
}

.serviceInformation > div {
  margin-left: 30px;
  // margin-right: 30px;
}

.serviceInformation > div > span {
  display: inline-block;
  width: 310px;
}

.informationScreeningBox {
  width: 1200px;
  margin: auto;
  margin-top: 72px;
}

/*.informationScreeningBox > div{*/
/*  width: 90px;*/
/*  height: 37px;*/
/*  line-height: 37px;*/
/*  text-align: center;*/
/*  margin-left: 50px;*/
/*}*/
/*.informationScreeningBox>div>a:hover{*/
/*  color: #5E90ED;*/
/*}*/
/*.informationScreeningBox > div > a{*/
/*  font-size: 16px;*/
/*  color: #666666;*/
/*}*/
.point {
  display: inline-block;
  width: 90px;
  height: 37px;
  text-align: center;
  line-height: 37px;
  border-bottom: 2px solid #1492ff;
  color: #1492ff;
  font-size: 16px;
}

.pointBox {
  /*border-bottom: 1px solid #E4E4E4;*/
  margin-bottom: 40px;
}

.labourClass {
  height: var(--box-height);
}

.contractClass {
  height: var(--box-height);
}

.fixed {
  position: fixed;
  top: 0px;
  background-color: white;
  color: white;
  left: calc(50% - 600px);
  margin: 0;
  z-index: 100;
  height: 45px;
}

.noFixed {
  position: static;
}

.positionSignAClass {
  height: 184px;
}

.positionSignBClass {
  height: 147px;
}

.date {
  width: 50%;
  height: 50px;
  border: 1px solid #eaeaea;
  border-left: none;
  border-bottom: none;
  margin: 0;
  text-align: center;
  line-height: 50px;
  background-color: #f6f8f9;
}

.time {
  width: 50%;
  height: 50px;
  border: 1px solid #eaeaea;
  border-left: none;
  border-bottom: none;
  margin: 0;
  text-align: center;
  line-height: 50px;
  background-color: #f6f8f9;
}

::v-deep .ant-modal {
  width: 1040px !important;
}

::v-deep .ant-modal-body {
  padding: 20px;
  padding-top: 50px;
}

.tableInBox {
  width: 50%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  margin: 0;
  border: 1px solid #eaeaea;
  border-left: none;
  border-bottom: none;
  background-color: #f6f8f9;
}

.tableInBox2 {
  width: 50%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  margin: 0;
  border: 1px solid #eaeaea;
  border-left: none;
  border-bottom: none;
}

.aModal {
  ::v-deep .ant-modal-body {
    max-height: 500px;
    overflow: auto;
  }
}

.aModal {
  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    /**/
  }
}
.aModal {
  ::-webkit-scrollbar-track {
    background: #f8f8f8;
    border-radius: 4px;
  }
}
.aModal {
  ::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 4px;
  }
}
::v-deep .ant-modal {
  padding-bottom: 0;
}
.flex1 {
  flex: 1;
}
</style>
